<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="__CSS__/font.css">
    <link rel="stylesheet" href="__CSS__/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="__STATIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__JS__/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    {include file="layout/element" /}
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">系统管理</a>
        <a>
          <cite>帮助中心</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div id="app">
        <el-button type="primary" @click="dialogFormVisible = true">添加帮助</el-button>

        <el-dialog title="添加帮助" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" :rules="rule">
                <el-form-item prop="title" label="标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="type" label="分类" :label-width="formLabelWidth">
                    <el-select v-model="form.type" placeholder="请选择分类">
                        <el-option v-for="(v,k) in type" :label="v" :value="k"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="content" label="正文" :label-width="formLabelWidth">
                    <el-input v-model="form.content" type="textarea" autosize></el-input>
                </el-form-item>
                <el-form-item label="下架时间" :label-width="formLabelWidth">
                    <el-date-picker
                            format="yyyy-MM-dd"
                            v-model="form.date"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="排序id" :label-width="formLabelWidth">
                    <el-input v-model="form.order_id" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
        <table class="layui-table">
            <thead>
            <tr>
                <th>编号</th>
                <th>帮助分类</th>
                <th>标题</th>
                <th>正文</th>
                <th>下架时间</th>
                <th>排序id</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="list" id="vo"}
            <tr>
                <td>{$vo.id}</td>
                <td>{$vo.type}</td>
                <td>{$vo.title}</td>
                <td>{$vo.content}</td>
                <td>{$vo.end_active_time|date='Y-m-d',###}</td>
                <td>{$vo.order}</td>
                <td>
                    <button class="layui-btn-danger layui-btn layui-btn-sm" onclick="del({$vo.id})">删除</button>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>
        <div class="page">
            {$page}
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        data: {
            dialogFormVisible: false,
            rule: {
                title: [
                    {required: true, message: '标题不能为空'}
                ],
                content: [
                    {required: true, message: '正文不能为空'}
                ]
            },
            form: {
                title: '',
                content: '',
                date: '',
                type: '',
                order_id: 1,
            },
            type: {$type},
            formLabelWidth: '120px',

        },
        methods: {
            add: function () {
                this.$confirm('确认提交').then(res => {
                    this.$refs['form'].validate(res => {
                        if (res) {
                            const tmp = Math.floor(this.form.date.valueOf() / 1000);
                            this.form.date = tmp;
                            $.post('/crm/sys/insert', this.form, res => {
                                if (res.code == 1) {
                                    this.$confirm('更新成功').then(res => {
                                        window.location.reload();
                                    })
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            }, 'json')
                        }
                    })
                })
            }
        }
    }).$mount("#app");
</script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    function del(id) {
        layer.confirm('确认删除', function () {
            $.post('/crm/sys/delHelp', {id: id}, function (res) {
                if (res.code == 1) {
                    layer.confirm(res.msg, function () {
                        window.location.reload();
                    })
                } else {
                    layer.alert(res.msg);
                }
            }, 'json');
        })
    }
</script>
</body>

</html>